<template>
  <div>
    <van-search v-model="valuess" shape="round" placeholder="请输入搜索关键词" />
    <div class="bom" v-show="!history">
      <van-cell-group v-for="item in qsearchApiData">
        <van-cell :title="item.goods_name" />
      </van-cell-group>
    </div>
    <div class="box" v-show="history">
      <div class="rm">
        <h3>历史搜索</h3>
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)">
          电视机
        </van-button>
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" style="margin-left: 15px;">
          液晶电视
        </van-button>
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" style="margin-left: 15px;">
          液晶屏幕
        </van-button>
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" style="margin-left: 15px;">
          智能手机
        </van-button>
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" style="margin-left: 15px; margin-top: 15px;">
          苹果手机
        </van-button>
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" style="margin-left: 15px; margin-top: 15px;">
          华为手机
        </van-button>
      </div>
      <div class="rm">
        <h3>热门搜索</h3>
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" >
          手机电池
        </van-button>
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" style="margin-left: 15px;">
          MP3
        </van-button>
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" style="margin-left: 15px;">
          录音笔
        </van-button>
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" style="margin-left: 15px;">
          电脑桌
        </van-button>
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" style="margin-left: 15px; margin-top: 15px;">
          摄像机
        </van-button>
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" style="margin-left: 15px; margin-top: 15px;">
          衣柜
        </van-button>
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" style="margin-left: 15px; margin-top: 15px;">
          液晶电视
        </van-button>
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" style="margin-left: 15px; margin-top: 15px;">
          双人床
        </van-button>
      </div>
    </div>
    <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
      description="描述文字" v-show="kongStatus" />
  </div>
</template>

<script setup>
import router from "@/router";
import { ref, watch } from "vue";
import { qsearchApi } from "@/api/api";
let qsearchApiData = ref([])
let valuess = ref('')
let history = ref(true)
let kongStatus = ref(false)
watch(valuess, (val) => {
  console.log(val.length)
  if (val.length == 0) {
    history.value = true
    kongStatus.value = false
  } else {
    history.value = false
    qsearchApi(val).then(res => {
      console.log('搜索', res)
      qsearchApiData.value = res.data.message
      console.log(res.data.message)
      if (qsearchApiData.value.length == 0) {
        kongStatus.value = true;
      } else {
        kongStatus.value = false;
      }
    })
  }
})

</script>

<style scoped>
.rm {
  float: left;

  .van-tag {
    float: left;
    margin: 20px;
    padding: 10px;
  }
}
</style>